<template>
  <el-row :gutter="15">
    <el-col v-bind="styleResponsive ? { lg: 24 } : { span: 24 }">
      <el-card shadow="never"
               header="收益明细">
        <div class="ele-cell ele-cell-align-bottom"> </div>

        <div class="ele-cell">
          <div style="width: 50px; white-space: nowrap;"
               class="ele-text-secondary">

            <span>用户充值</span>
          </div>
          <div class="ele-cell-content">
            <div class="marginBottom8">用户充值笔数(30笔)</div>
            <el-progress :percentage="60"
                         :stroke-width="12"
                         :show-text="false" />
          </div>
          <div style="width: 80px; white-space: nowrap;margin-left: 30px;"
               class="ele-text-secondary">

            <span> ￥250000</span>
          </div>
        </div>
        <div class="ele-cell">
          <div style="width: 50px; white-space: nowrap;"
               class="ele-text-secondary">
            <span>分类一</span>
          </div>
          <div class="ele-cell-content">
            <div class="marginBottom8">用户充值笔数(30笔)</div>
            <el-progress :percentage="40"
                         :stroke-width="12"
                         :show-text="false" />
          </div>
          <div style="width: 80px; white-space: nowrap;margin-left: 30px;"
               class="ele-text-secondary">
            <span>￥250000</span>
          </div>
        </div>
        <div class="ele-cell">
          <div style="width: 50px; white-space: nowrap;"
               class="ele-text-secondary">
            <span>分类一</span>
          </div>
          <div class="ele-cell-content">
            <div class="marginBottom8">用户充值笔数(30笔)</div>
            <el-progress :percentage="20"
                         :stroke-width="12"
                         :show-text="false" />
          </div>
          <div style="width: 80px; white-space: nowrap;margin-left: 30px;"
               class="ele-text-secondary">
            <span> ￥250000</span>
          </div>
        </div>
        <div class="ele-cell">
          <div style="width: 50px; white-space: nowrap;"
               class="ele-text-secondary">
            <span>分类一</span>
          </div>
          <div class="ele-cell-content">
            <div class="marginBottom8">用户充值笔数(30笔)</div>
            <el-progress :percentage="10"
                         :stroke-width="12"
                         :show-text="false" />
          </div>
          <div style="width: 80px; white-space: nowrap;margin-left: 30px;"
               class="ele-text-secondary">
            <span>￥250000</span>
          </div>
        </div>
        <div class="ele-cell">
          <div style="width: 50px; white-space: nowrap;"
               class="ele-text-secondary">
            <span>分类一</span>
          </div>
          <div class="ele-cell-content">
            <div class="marginBottom8">用户充值笔数(30笔)</div>
            <el-progress :percentage="10"
                         :stroke-width="12"
                         :show-text="false" />
          </div>
          <div style="width: 80px; white-space: nowrap;margin-left: 30px;"
               class="ele-text-secondary">
            <span> ￥250000</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      // 用户评分
      userRate: 4.5
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  }
};
</script>

<style lang="scss" scoped>
.ele-cell:not(.ele-cell-align-top) {
  align-items: end;
  margin-bottom: 20px;
}
.marginBottom8 {
  margin-bottom: 6px;
  margin-left: 6px;
  color: #000;
  font-weight: 400;
}
/* 笑脸、哭脸 */
.monitor-face-smile,
.monitor-face-cry {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #fbd971;
  border-radius: 50%;
  position: relative;
}

.monitor-face-smile > span,
.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry > span,
.monitor-face-cry:before,
.monitor-face-cry:after {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: rotate(225deg);
  border: 3px solid #f0c419;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  position: absolute;
  bottom: 8px;
  left: 11px;
}

.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry:before,
.monitor-face-cry:after {
  content: '';
  width: 6px;
  height: 6px;
  left: 8px;
  top: 14px;
  border-color: #f29c1f;
  transform: rotate(45deg);
}

.monitor-face-smile:after,
.monitor-face-cry:after {
  left: auto;
  right: 8px;
}

.monitor-face-cry > span {
  transform: rotate(45deg);
  bottom: -6px;
}

/* 圆形进度条组合 */
.monitor-progress-group {
  position: relative;
  display: inline-block;

  .el-progress:not(:first-child) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -1px;
  }

  :deep(.el-progress-circle__track) {
    stroke: hsla(0deg, 0%, 60%, 0.15);
  }
}

.monitor-progress-legends > div + div {
  margin-top: 8px;
}
</style>
